<!--
 * @Author: cjy
 * @Date: 2020-09-16 14:51:11
 * @LastEditors: Please set LastEditors
 * @Descripttion: 
 * @LastEditTime: 2022-05-11 11:19:53
 * @FilePath: \vue-openlayers-demos\src\views\vectorJSONClipTile\VectorJSONClipTile.vue
-->
<template>
  <div class="vm">
    <h2 class="h-title">矢量图 JSON</h2>
    <div id="map" class="map-x"></div>

    <div class="explain"></div>
  </div>
</template>

<script>
import "ol/ol.css";
// import ZJS from "@/assets/data/Export_Output.json";
import ZJSM from "@/assets/data/test/ZJ_multyGeometry.json";
import { Map, View } from "ol";
import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import OSM from "ol/source/OSM";
import { fromLonLat } from "ol/proj";

import { Fill, Style, Stroke } from "ol/style";
import { getVectorContext } from "ol/render";

export default {
  name: "VectorJSON",
  data() {
    return {
      map: null,
      view: new View({
        // projection: "EPSG:4326",
        // center: [116.403963,39.915119], // 中国
        center: fromLonLat([116.403963, 39.915119]), // 中国
        zoom: 3,
      }),
    };
  },
  methods: {
    initMap() {
      let base = new Tile({
        // source: new OSM(), // OSM图层数据源
        source: new XYZ({
          // url: "http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
          url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
          projection: "EPSG:4326",
        }),
      });

      let clipLayer = new LayerVector({
        style: new Style({
          stroke: new Stroke({
            color: "#f00",
            width: 1,
          }),
          fill: new Fill({
            color: "rgba(255, 0, 0, 0)",
          }),
        }),
        // style: null,
        source: new SourceVector({
          features: new GeoJSON().readFeatures(ZJSM, {
            dataProjection: "EPSG:4326",
            featureProjection: "EPSG:3857",
          }),
        }),
      });

      //Giving the clipped layer an extent is necessary to avoid rendering when the feature is outside the viewport
      clipLayer.getSource().on("featuresloadstart", function () {
        console.log("000000000000000000");
        base.setExtent(clipLayer.getSource().getExtent());
      });

      const style = new Style({
        fill: new Fill({
          color: "black",
        }),
      });

      this.map = new Map({
        target: "map",
        layers: [
          base,
          // clipLayer,
        ],
        view: this.view,
      });

      base.on("postrender", function (e) {
        const vectorContext = getVectorContext(e);
        e.context.globalCompositeOperation = "destination-in";
        clipLayer.getSource().forEachFeature(function (feature) {
          console.log("1111111111111111111111111");
          vectorContext.drawFeature(feature, style);
        });
        e.context.globalCompositeOperation = "source-over";
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style>
</style>